<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>御码商城</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <!-- 顶部导航 -->
    <div class="topNav">
      <div class="w">
        <!-- 左侧区域 -->
        <div class="leftNav left">
          <span class="iconfont icon-dingwei"></span>
          大连
        </div>
        <!-- 右侧导航区域 -->
        <div class="rigthNav right">
          <ul>
            <li class="left"><a href="#target_div">你好，请登录</a></li>
            <li class="left"><a href="#">免费注册</a></li>
            <li class="left">
              <a href="#">
                我的订单
                <span class="iconfont icon-arrow-down"></span>
              </a>
              <!-- 二级导航 -->
              <div class="second_menu"></div>
            </li>
            <li class="left">
              <a href="#">
                我的御码
                <span class="iconfont icon-arrow-down"></span>
              </a>
              <div class="second_menu"></div>
            </li>
            <li class="left"><a href="#">企业采购</a></li>
            <li class="left"><a href="#">商家服务</a></li>
            <li class="left"><a href="#">网站导航</a></li>
            <li class="left"><a href="#">手机御码</a></li>
            <li class="left"><a href="#">网站无障碍</a></li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 搜索区域 -->
    <div class="searchBox clearfix">
      <div class="w">
        <div class="left left_box">
          <a href="#">
            <img src="./img/LOGO@1x.png" alt="" />
          </a>
        </div>
        <!-- 中间搜索区域 -->
        <div class="left middle_box">
          <!-- 搜索框 -->
          <div class="search_input">
            <input type="text" placeholder="手机/电脑/家用电器" />
            <input type="button" />
            <span class="iconfont icon-search"></span>
          </div>

          <!-- 购物车 -->
          <div class="car">
            <span class="iconfont icon-icon-test"></span>
            我的购物车
          </div>

          <!-- 热词搜索 -->
          <div class="hot_words">
            <a href="#">家电年货节</a>
            <a href="#">全球买手</a>
            <a href="#">兔年焕新</a>
            <a href="#">热水器</a>
            <a href="#">血氧检测</a>
            <a href="#">车厘子</a>
            <a href="#">手机免息</a>
            <a href="#">御码精选</a>
            <a href="#">热卖潮品</a>
          </div>

          <!-- 主体导航 -->
          <div class="main_Nav">
            <ul>
              <li><a href="#">御码超市</a></li>
              <li><a href="#">优惠券</a></li>
              <li><a href="#">买啥</a></li>
              <li><a href="#">御码家电</a></li>
              <li><a href="#">御码生鲜</a></li>
              <li><a href="#">PLUS会员</a></li>
              <li><a href="#">进口好物</a></li>
              <li><a href="#">品牌闪购</a></li>
              <li><a href="#">拍卖</a></li>
              <li><a href="#">五金商店</a></li>
            </ul>
          </div>
        </div>
        <div class="right right_box">
          <a href="#">
            <img src="./img/banner_right.gif" alt="" />
          </a>
        </div>
      </div>
    </div>

    <!-- 页面主体区域 -->
    <div class="main_body">
      <div class="w">
        <!-- 广告区域 -->
        <div class="banner clearfix">
          <div class="pub_banner left">
            <ul>
              <li><a href="#">手机/运营商/数码</a></li>
              <li><a href="#">电脑/办公</a></li>
              <li><a href="#">家具/家居/家装/厨具</a></li>
              <li><a href="#">男装/女装/童装/内衣 </a></li>
              <li><a href="#">美妆/个护清洁/宠物 </a></li>
              <li><a href="#">女鞋/箱包/钟表/珠宝 </a></li>
              <li><a href="#">男鞋/运动/户外 </a></li>
              <li><a href="#">房产/汽车/汽车用品 </a></li>
              <li><a href="#">母婴/玩具乐器 </a></li>
              <li><a href="#">食品/酒类/生鲜/特产 </a></li>
              <li><a href="#">艺术/礼品鲜花/农资绿植</a></li>
              <li><a href="#">医药保健/计生情趣</a></li>
              <li><a href="#">图书/文娱/教育/电子书</a></li>
              <li><a href="#">机票/酒店/旅游/生活</a></li>
              <li><a href="#">众筹/白条/保险/企业金融</a></li>
              <li><a href="#">安装/维修/清洗/二手</a></li>
            </ul>
          </div>
          <div class="pub_banner left">
            <a href="#">
              <img src="./img/banner_主图@1x.png" alt="" />
            </a>
          </div>
          <div class="pub_banner left">
            <a href="#"><img src="./img/Rectangle11@1x.png" alt="" /></a>
            <a href="#"><img src="./img/侧边banner2@1x.png" alt="" /></a>
            <a href="#"><img src="./img/侧边banner3@1x.png" alt="" /></a>
          </div>

          <!-- 最右侧区域 -->
          <div class="pub_banner left">
            <!-- 用户信息区域 -->
            <div class="userInfo">
              <div class="top_msg clearfix">
                <img src="./img/Ellipse1@1x.png" alt="" />
                <p>Hi~ 欢迎光临御码</p>
                <p>
                  <a href="#">登录</a>
                  <a href="#">注册</a>
                </p>
              </div>
              <div class="bot_show">
                <span>新人福利</span>
                <span>御码会员</span>
              </div>
            </div>

            <!-- 御码快报 -->
            <div class="newsList">
              <div class="newsTitle clearfix">
                <h4>御码快报</h4>
                <a href="#">
                  更多
                  <span>></span>
                </a>
              </div>
              <div class="content">
                <ul>
                  <li class="clearfix">
                    <span>热评</span>
                    <p>毛衣+直筒裤，才是YYDS。</p>
                  </li>
                  <li class="clearfix">
                    <span>热评</span>
                    <p>毛衣+直筒裤，才是YYDS。</p>
                  </li>
                  <li class="clearfix">
                    <span>热评</span>
                    <p>毛衣+直筒裤，才是YYDS。</p>
                  </li>
                  <li class="clearfix">
                    <span>热评</span>
                    <p>毛衣+直筒裤，才是YYDS。</p>
                  </li>
                </ul>
              </div>
            </div>

            <!-- 服务列表区域 -->
            <div class="service">
              <ul>
                <li>
                  <!-- 为了显示精灵图做准备 -->
                  <span></span>
                  <!-- 显示文本 -->
                  <span>话费</span>
                </li>
                <li>
                  <!-- 为了显示精灵图做准备 -->
                  <span></span>
                  <!-- 显示文本 -->
                  <span>话费</span>
                </li>
                <li>
                  <!-- 为了显示精灵图做准备 -->
                  <span></span>
                  <!-- 显示文本 -->
                  <span>话费</span>
                </li>
                <li>
                  <!-- 为了显示精灵图做准备 -->
                  <span></span>
                  <!-- 显示文本 -->
                  <span>话费</span>
                </li>
                <li>
                  <!-- 为了显示精灵图做准备 -->
                  <span></span>
                  <!-- 显示文本 -->
                  <span>话费</span>
                </li>
                <li>
                  <!-- 为了显示精灵图做准备 -->
                  <span></span>
                  <!-- 显示文本 -->
                  <span>话费</span>
                </li>
                <li>
                  <!-- 为了显示精灵图做准备 -->
                  <span></span>
                  <!-- 显示文本 -->
                  <span>话费</span>
                </li>
                <li>
                  <!-- 为了显示精灵图做准备 -->
                  <span></span>
                  <!-- 显示文本 -->
                  <span>话费</span>
                </li>
                <li>
                  <!-- 为了显示精灵图做准备 -->
                  <span></span>
                  <!-- 显示文本 -->
                  <span>话费</span>
                </li>
                <li>
                  <!-- 为了显示精灵图做准备 -->
                  <span></span>
                  <!-- 显示文本 -->
                  <span>话费</span>
                </li>
                <li>
                  <!-- 为了显示精灵图做准备 -->
                  <span></span>
                  <!-- 显示文本 -->
                  <span>话费</span>
                </li>
                <li>
                  <!-- 为了显示精灵图做准备 -->
                  <span></span>
                  <!-- 显示文本 -->
                  <span>话费</span>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 秒杀专场区域 -->
        <div class="s_kill">
          <div class="leftkill left">
            <h4>秒杀专场</h4>
            <img src="./img/Rectangle31@1x.png" alt="" />
          </div>

          <div class="middlekill left">
            <ul>
              <li>
                <a href="#"><img src="./img/Rectangle33@1x.png" alt="" /></a>
                <p>
                  荣耀60 SE 120Hz十亿色曲面屏 66W超级快充 6400万Vlog相机
                  全网通版 5G手机 8GB+256GB 亮黑色
                </p>
                <p class="lastp">¥1949.00</p>
              </li>
              <li>
                <a href="#"><img src="./img/Rectangle33@1x-1.png" alt="" /></a>
                <p>
                  荣耀60 SE 120Hz十亿色曲面屏 66W超级快充 6400万Vlog相机
                  全网通版 5G手机 8GB+256GB 亮黑色
                </p>
                <p class="lastp">¥1949.00</p>
              </li>

              <li>
                <a href="#"><img src="./img/Rectangle33@1x-3.png" alt="" /></a>
                <p>
                  荣耀60 SE 120Hz十亿色曲面屏 66W超级快充 6400万Vlog相机
                  全网通版 5G手机 8GB+256GB 亮黑色
                </p>
                <p class="lastp">¥1949.00</p>
              </li>

              <li>
                <a href="#"><img src="./img/Rectangle33@1x-2.png" alt="" /></a>
                <p>
                  荣耀60 SE 120Hz十亿色曲面屏 66W超级快充 6400万Vlog相机
                  全网通版 5G手机 8GB+256GB 亮黑色
                </p>
                <p class="lastp">¥1949.00</p>
              </li>
            </ul>
          </div>

          <div class="rightkill right">
            <img src="./img/扫描二维码@1x.png" alt="" />
          </div>
        </div>
      </div>

      <!-- 年货节 -->
      <div class="year_goods">
        <ul>
          <li>
            <a href="#">
              <img src="./img/年货产品图02@1x.png" alt="" />
            </a>
            <p>至高24期免息</p>
            <p>酒水好店</p>
          </li>
          <li>
            <a href="#">
              <img src="./img/年货产品图01@1x.png" alt="" />
            </a>
            <p>至高24期免息</p>
            <p>酒水好店</p>
          </li>

          <li>
            <a href="#">
              <img src="./img/年货产品图03@1x.png" alt="" />
            </a>
            <p>至高24期免息</p>
            <p>酒水好店</p>
          </li>

          <li>
            <a href="#">
              <img src="./img/年货产品图04@1x.png" alt="" />
            </a>
            <p>至高24期免息</p>
            <p>酒水好店</p>
          </li>

          <li>
            <a href="#">
              <img src="./img/年货产品图05@1x.png" alt="" />
            </a>
            <p>至高24期免息</p>
            <p>酒水好店</p>
          </li>

          <li>
            <a href="#">
              <img src="./img/年货产品图06@1x.png" alt="" />
            </a>
            <p>至高24期免息</p>
            <p>酒水好店</p>
          </li>
          <li>
            <a href="#">
              <img src="./img/年货产品图07@1x.png" alt="" />
            </a>
            <p>至高24期免息</p>
            <p>酒水好店</p>
          </li>
          <li>
            <a href="#">
              <img src="./img/年货产品图08@1x.png" alt="" />
            </a>
            <p>至高24期免息</p>
            <p>酒水好店</p>
          </li>

          <li>
            <a href="#">
              <img src="./img/年货产品图09@1x.png" alt="" />
            </a>
            <p>至高24期免息</p>
            <p>酒水好店</p>
          </li>

          <li>
            <a href="#">
              <img src="./img/年货产品图10@1x.png" alt="" />
            </a>
            <p>至高24期免息</p>
            <p>酒水好店</p>
          </li>

          <li>
            <a href="#">
              <img src="./img/年货产品图11@1x.png" alt="" />
            </a>
            <p>至高24期免息</p>
            <p>酒水好店</p>
          </li>

          <li>
            <a href="#">
              <img src="./img/年货产品图12@1x.png" alt="" />
            </a>
            <p>至高24期免息</p>
            <p>酒水好店</p>
          </li>
        </ul>
      </div>

      <!-- 版心 -->
      <div class="w">
        <!-- 每日特价 -->
        <div class="day_price clearfix">
          <div class="priceBox left">
            <!-- 标题 -->
            <div class="title">
              <h4 class="left">每日特价</h4>
              <img src="./img/icon_更多@1x.png" alt="" class="left" />
              <a href="#" class="right">精选</a>
            </div>
            <!-- 内容区域 -->
            <div class="content">
              <!-- 左侧内容区域 -->
              <div class="left left_content">
                <img src="./img/最近7天低价@1x.png" alt="" />

                <div class="content_other">
                  <a href="#">
                    <img src="./img/每日特价产品图01@1x.png" alt="" />
                  </a>
                  <p>赣南 精品脐橙一箱</p>
                  <p>￥99.9</p>
                  <p>已经抢购1320件</p>
                </div>
              </div>
              <!-- 右侧内容区域 -->
              <div class="right right_content">
                <!-- 商品展示 -->
                <div class="item">
                  <img
                    src="./img/每日特价产品图02@1x.png"
                    alt=""
                    class="left"
                  />
                  <p class="left">赣南 精品脐橙一箱</p>
                  <p class="left" style="color: #dd302d">￥9.9</p>
                  <p class="left" style="color: #ccc; font-size: 12px">
                    已抢购320件
                  </p>
                </div>

                <div class="item">
                  <img
                    src="./img/每日特价产品图03@1x.png"
                    alt=""
                    class="left"
                  />
                  <p class="left">赣南 精品脐橙一箱</p>
                  <p class="left" style="color: #dd302d">￥9.9</p>
                  <p class="left" style="color: #ccc; font-size: 12px">
                    已抢购320件
                  </p>
                </div>

                <div class="item">
                  <img
                    src="./img/每日特价产品图04@1x.png"
                    alt=""
                    class="left"
                  />
                  <p class="left">赣南 精品脐橙一箱</p>
                  <p class="left" style="color: #dd302d">￥9.9</p>
                  <p class="left" style="color: #ccc; font-size: 12px">
                    已抢购320件
                  </p>
                </div>

                <div class="item">
                  <img
                    src="./img/每日特价产品图05@1x.png"
                    alt=""
                    class="left"
                  />
                  <p class="left">赣南 精品脐橙一箱</p>
                  <p class="left" style="color: #dd302d">￥9.9</p>
                  <p class="left" style="color: #ccc; font-size: 12px">
                    已抢购320件
                  </p>
                </div>
              </div>
            </div>
          </div>

          <div class="priceBox left">
            <!-- 标题 -->
            <div class="title">
              <h4 class="left">每日特价</h4>
              <img src="./img/icon_更多@1x.png" alt="" class="left" />
              <a href="#" class="right">精选</a>
            </div>
            <!-- 内容区域 -->
            <div class="content">
              <!-- 左侧内容区域 -->
              <div class="left left_content">
                <img src="./img/最近7天低价@1x.png" alt="" />

                <div class="content_other">
                  <a href="#">
                    <img src="./img/每日特价产品图01@1x.png" alt="" />
                  </a>
                  <p>赣南 精品脐橙一箱</p>
                  <p>￥99.9</p>
                  <p>已经抢购1320件</p>
                </div>
              </div>
              <!-- 右侧内容区域 -->
              <div class="right right_content">
                <!-- 商品展示 -->
                <div class="item">
                  <img
                    src="./img/每日特价产品图02@1x.png"
                    alt=""
                    class="left"
                  />
                  <p class="left">赣南 精品脐橙一箱</p>
                  <p class="left" style="color: #dd302d">￥9.9</p>
                  <p class="left" style="color: #ccc; font-size: 12px">
                    已抢购320件
                  </p>
                </div>

                <div class="item">
                  <img
                    src="./img/每日特价产品图03@1x.png"
                    alt=""
                    class="left"
                  />
                  <p class="left">赣南 精品脐橙一箱</p>
                  <p class="left" style="color: #dd302d">￥9.9</p>
                  <p class="left" style="color: #ccc; font-size: 12px">
                    已抢购320件
                  </p>
                </div>

                <div class="item">
                  <img
                    src="./img/每日特价产品图04@1x.png"
                    alt=""
                    class="left"
                  />
                  <p class="left">赣南 精品脐橙一箱</p>
                  <p class="left" style="color: #dd302d">￥9.9</p>
                  <p class="left" style="color: #ccc; font-size: 12px">
                    已抢购320件
                  </p>
                </div>

                <div class="item">
                  <img
                    src="./img/每日特价产品图05@1x.png"
                    alt=""
                    class="left"
                  />
                  <p class="left">赣南 精品脐橙一箱</p>
                  <p class="left" style="color: #dd302d">￥9.9</p>
                  <p class="left" style="color: #ccc; font-size: 12px">
                    已抢购320件
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 全球购 -->
        <div class="global">
          <div class="title"><h1>全球购</h1></div>
          <div class="content">
            <div class="public_products">
              <a href="#"
                ><img src="./img/全球购产品图02@1x.png" alt="" class="products"
              /></a>

              <div class="public_item">
                <!-- 标题 -->
                <div class="p_title clearfix">
                  <h4 class="left">御码寻宝</h4>
                  <span class="left">懂你的御码汇</span>
                </div>
                <!-- 图片展示内容 -->
                <div class="imgsBox">
                  <a href="#"
                    ><img src="./img/全球购产品图09@1x.png" alt=""
                  /></a>
                  <a href="#"
                    ><img src="./img/全球购产品图10@1x.png" alt=""
                  /></a>
                </div>
              </div>
            </div>
            <div class="public_products">
              <a href="#"
                ><img src="./img/全球购产品图01@1x.png" alt="" class="products"
              /></a>

              <div class="public_item">
                <!-- 标题 -->
                <div class="p_title clearfix">
                  <h4 class="left">御码寻宝</h4>
                  <span class="left">懂你的御码汇</span>
                </div>
                <!-- 图片展示内容 -->
                <div class="imgsBox">
                  <a href="#"
                    ><img src="./img/全球购产品图11@1x.png" alt=""
                  /></a>
                  <a href="#"
                    ><img src="./img/全球购产品图12@1x.png" alt=""
                  /></a>
                </div>
              </div>
            </div>
            <div class="public_products">
              <div class="public_item">
                <!-- 标题 -->
                <div class="p_title clearfix">
                  <h4 class="left">御码寻宝</h4>
                  <span class="left">懂你的御码汇</span>
                </div>
                <!-- 图片展示内容 -->
                <div class="imgsBox">
                  <a href="#"
                    ><img src="./img/全球购产品图13@1x.png" alt=""
                  /></a>
                  <a href="#"
                    ><img src="./img/全球购产品图14@1x.png" alt=""
                  /></a>
                </div>
              </div>
              <div class="public_item">
                <!-- 标题 -->
                <div class="p_title clearfix">
                  <h4 class="left">御码寻宝</h4>
                  <span class="left">懂你的御码汇</span>
                </div>
                <!-- 图片展示内容 -->
                <div class="imgsBox">
                  <a href="#"
                    ><img src="./img/全球购产品图15@1x.png" alt=""
                  /></a>
                  <a href="#"
                    ><img src="./img/全球购产品图16@1x.png" alt=""
                  /></a>
                </div>
              </div>

              <div class="public_item">
                <!-- 标题 -->
                <div class="p_title clearfix">
                  <h4 class="left">御码寻宝</h4>
                  <span class="left">懂你的御码汇</span>
                </div>
                <!-- 图片展示内容 -->
                <div class="imgsBox">
                  <a href="#"
                    ><img src="./img/全球购产品图17@1x.png" alt=""
                  /></a>
                  <a href="#"
                    ><img src="./img/全球购产品图18@1x.png" alt=""
                  /></a>
                </div>
              </div>
            </div>
            <div class="public_products">
              <div class="public_item">
                <!-- 标题 -->
                <div class="p_title clearfix">
                  <h4 class="left">御码寻宝</h4>
                  <span class="left">懂你的御码汇</span>
                </div>
                <!-- 图片展示内容 -->
                <div class="imgsBox">
                  <a href="#"
                    ><img src="./img/全球购产品图05@1x.png" alt=""
                  /></a>
                  <a href="#"
                    ><img src="./img/全球购产品图06@1x.png" alt=""
                  /></a>
                </div>
              </div>

              <div class="public_item">
                <!-- 标题 -->
                <div class="p_title clearfix">
                  <h4 class="left">御码寻宝</h4>
                  <span class="left">懂你的御码汇</span>
                </div>
                <!-- 图片展示内容 -->
                <div class="imgsBox">
                  <a href="#"
                    ><img src="./img/全球购产品图07@1x.png" alt=""
                  /></a>
                  <a href="#"
                    ><img src="./img/全球购产品图08@1x.png" alt=""
                  /></a>
                </div>
              </div>

              <div class="public_item">
                <!-- 标题 -->
                <div class="p_title clearfix">
                  <h4 class="left">御码寻宝</h4>
                  <span class="left">懂你的御码汇</span>
                </div>
                <!-- 图片展示内容 -->
                <div class="imgsBox">
                  <a href="#"
                    ><img src="./img/全球购产品图03@1x.png" alt=""
                  /></a>
                  <a href="#"
                    ><img src="./img/全球购产品图04@1x.png" alt=""
                  /></a>
                </div>
              </div>
            </div>
          </div>
        </div>

         <!-- 为你推荐 -->
         <div class="recommand">
              <div class="main_title"><h1>为你推荐</h1></div>
              <div class="title_list">
                  <ul>
                     <li>
                         <span>精选</span>
                         <span>猜你喜欢</span>
                     </li>
                     <li>
                         <span>精选</span>
                         <span>猜你喜欢</span>
                     </li>
                     <li>
                         <span>精选</span>
                         <span>猜你喜欢</span>
                     </li>
                     <li>
                         <span>精选</span>
                         <span>猜你喜欢</span>
                     </li>
                     <li>
                         <span>精选</span>
                         <span>猜你喜欢</span>
                     </li>
                     <li>
                         <span>精选</span>
                         <span>猜你喜欢</span>
                     </li>
                  </ul>
              </div>
              <div class="content clearfix">
                  <ul>
                     <li>
                        <a href="#"><img src="./img/为你推荐产品图01@1x.png" alt=""></a>
                        <p>【新年送礼】雅萌美容仪套装全脸抗老</p>
                        <p>￥5799</p>
                     </li>
                      <li>
                        <a href="#"><img src="./img/为你推荐产品图07@1x.png" alt=""></a>
                        <p>【新年送礼】雅萌美容仪套装全脸抗老</p>
                        <p>￥5799</p>
                     </li>
                      <li>
                        <a href="#"><img src="./img/为你推荐产品图08@1x.png" alt=""></a>
                        <p>【新年送礼】雅萌美容仪套装全脸抗老</p>
                        <p>￥5799</p>
                     </li>
                      <li>
                        <a href="#"><img src="./img/为你推荐产品图09@1x.png" alt=""></a>
                        <p>【新年送礼】雅萌美容仪套装全脸抗老</p>
                        <p>￥5799</p>
                     </li>
                      <li>
                        <a href="#"><img src="./img/为你推荐产品图10@1x.png" alt=""></a>
                        <p>【新年送礼】雅萌美容仪套装全脸抗老</p>
                        <p>￥5799</p>
                     </li>
                       <li>
                        <a href="#"><img src="./img/为你推荐产品图02@1x.png" alt=""></a>
                        <p>【新年送礼】雅萌美容仪套装全脸抗老</p>
                        <p>￥5799</p>
                     </li>
                      <li>
                        <a href="#"><img src="./img/为你推荐产品图03@1x.png" alt=""></a>
                        <p>【新年送礼】雅萌美容仪套装全脸抗老</p>
                        <p>￥5799</p>
                     </li>
                      <li>
                        <a href="#"><img src="./img/为你推荐产品图04@1x.png" alt=""></a>
                        <p>【新年送礼】雅萌美容仪套装全脸抗老</p>
                        <p>￥5799</p>
                     </li>
                      <li>
                        <a href="#"><img src="./img/为你推荐产品图05@1x.png" alt=""></a>
                        <p>【新年送礼】雅萌美容仪套装全脸抗老</p>
                        <p>￥5799</p>
                     </li>
                      <li>
                        <a href="#"><img src="./img/为你推荐产品图06@1x.png" alt=""></a>
                        <p>【新年送礼】雅萌美容仪套装全脸抗老</p>
                        <p>￥5799</p>
                     </li>
                  </ul>
              </div>
         </div>

      </div>
    </div>

    <!-- 底部结尾区域 -->
    <div class="footer">
        <div class="w">
            <div class="top_footer clearfix">
                <p><img src="./img/footer_01@1x.png" alt=""></p>
                <p><img src="./img/footer_02@1x.png" alt=""></p>
                <p><img src="./img/footer_03@1x.png" alt=""></p>
                <p><img src="./img/footer_04@1x.png" alt=""></p>
            </div>

            <div class="middle_footer clearfix">
               <dl>
                  <dt>购物指南</dt>
                  <dd>购物流程 </dd>
                  <dd>会员介绍 </dd>
                  <dd>生活旅行 </dd>
                  <dd>常见问题 </dd>
                  <dd>大家电 </dd>
                  <dd>联系客服</dd>
               </dl>
               <dl>
                  <dt>购物指南</dt>
                  <dd>购物流程 </dd>
                  <dd>会员介绍 </dd>
                  <dd>生活旅行 </dd>
                  <dd>常见问题 </dd>
                  <dd>大家电 </dd>
                  <dd>联系客服</dd>
               </dl>
               <dl>
                  <dt>购物指南</dt>
                  <dd>购物流程 </dd>
                  <dd>会员介绍 </dd>
                  <dd>生活旅行 </dd>
                  <dd>常见问题 </dd>
                  <dd>大家电 </dd>
                  <dd>联系客服</dd>
               </dl>
               <dl>
                  <dt>购物指南</dt>
                  <dd>购物流程 </dd>
                  <dd>会员介绍 </dd>
                  <dd>生活旅行 </dd>
                  <dd>常见问题 </dd>
                  <dd>大家电 </dd>
                  <dd>联系客服</dd>
               </dl>
               <dl>
                  <dt>购物指南</dt>
                  <dd>购物流程 </dd>
                  <dd>会员介绍 </dd>
                  <dd>生活旅行 </dd>
                  <dd>常见问题 </dd>
                  <dd>大家电 </dd>
                  <dd>联系客服</dd>
               </dl>
               <dl>
                  <dt>购物指南</dt>
                  <dd>购物流程 </dd>
                  <dd>会员介绍 </dd>
                  <dd>生活旅行 </dd>
                  <dd>常见问题 </dd>
                  <dd>大家电 </dd>
                  <dd>联系客服</dd>
               </dl>
            </div>

            <div class="link clearfix">
                <a href="#">关于我们</a>
                <a href="#">关于我们</a>
                <a href="#">关于我们</a>
                <a href="#">关于我们</a>
                <a href="#">关于我们</a>
                <a href="#">关于我们</a>
                <a href="#">关于我们</a>
                <a href="#">关于我们</a>
                <a href="#">关于我们</a>
                <a href="#">关于我们</a>
            </div>

            <p>京ICP备12345678901</p>
        </div>
    </div>


    <!-- 模拟登录效果: 遮罩层 -->
    <div class="cover"  id="target_div">
        <!-- 登录 -->
        <div class="login">
            <!-- 顶部广告区域 -->
            <ul>
               <li>
                   <img src="./jd_img/2.png" alt="">
                   <p>5元门槛红包</p>
                   <p>随机发放</p>
               </li>
               <li>
                   <img src="./jd_img/1.png" alt="">
                    <p>5元门槛红包</p>
                   <p>随机发放</p>
               </li>
               <li>
                    <img src="./jd_img/3.png" alt="">
                     <p>5元门槛红包</p>
                   <p>随机发放</p>
               </li>
            </ul>
            <!-- 表单登录区域 -->
            <div class="form_login">
                <!-- 左侧登录区域 -->
                <div class="left_login  left">
                      <h4>APP扫码登录</h4>
                      <p>打开右上角扫一扫</p>
                      <img src="./jd_img/show.png" alt="">
                </div>
                <!-- 竖线 -->
                <div class="line left"></div>

                <!-- 右侧登录区域 -->
                <div class="right_login right">
                     <!-- 标题 -->
                     <div class="title">
                        <a href="#">密码登录</a>
                        <a href="#">短信登录</a>
                     </div>

                     <!-- 表单域 -->
                     <form action="1.php" method="get">
                         <input type="text" class="public">
                         <input type="password" class="public">
                         <input type="button" value="登录" class="public" disabled>
                     </form>
                </div>
            </div>

            <!-- 关闭按钮 -->
            <a href="#" class="close">X</a>
        </div>
    </div>
  </body>
</html>
